// 首页
<template>
    <f7-page class="hntList">
        <div class="header">
            <div class="links" v-if="!isUmSdk">
                <img
                    width="22"
                    @click="openSidebar"
                    src="../../../assets/img/qzjx/sidebar.svg"
                    alt=""
                />
            </div>
            <img
                class="home-title"
                width="120"
                src="../../../assets/img/qzjx/home-title.svg"
                alt=""
            />
        </div>
        <div class="info-box">
            <div class="info-box-left">
                <img
                    width="33"
                    src="../../../assets/img/qzjx/home-info.svg"
                    alt=""
                />
            </div>
            <div class="info-box-right">
                <div class="messages-content">
                    <span>置顶</span>
                    <span class="text-overflow-one">暂无数据</span>
                    <span></span>
                </div>
                <div class="info-content">
                    <span>最新</span>
                    <span class="text-overflow-one">暂无数据</span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="list-box">
            <div class="list-title">
                <van-badge
                    color="#F15A5A"
                    :content="query.recordsTotal"
                    v-if="query.data.length > 0"
                >
                    <h4>待办</h4>
                </van-badge>
                <h4 v-else>待办</h4>
                <span
                    v-if="query.data.length > 0"
                    class="more"
                    @click="$f7router.navigate(`/business/qzjx/workList`)"
                >
                    更多<f7-icon f7="chevron_right" size="16px"></f7-icon>
                </span>
            </div>
            <f7-list
                media-list
                class="search-list"
                v-if="query.data.length > 0"
            >
                <!-- <li v-for="(item, index) in query.data" :key="index" @click="goTodo(item)"> -->
                <li
                    v-for="(item, index) in query.data"
                    :key="index"
                    @click="goTodo(item)"
                >
                    <!-- tag-yellow tag-green -->
                    <div class="content">
                        <div class="content-top">
                            <div>
                                <span class="tag">{{
                                    item.taskName || item.TASKNAME
                                }}</span>
                                <span class="code">{{
                                    item.appName || item.APPNAME
                                }}</span>
                            </div>
                            <span class="time">{{
                                getCommentTime(item.startTime || item.STARTTIME)
                            }}</span>
                        </div>
                        <div class="content-bottom text-overflow-one">
                            {{ item.instanceTitle || item.INSTANCETITLE }}
                        </div>
                    </div>
                </li>
            </f7-list>
            <f7-list class="search-list" v-else>
                <v-empty description="暂无待办数据" />
            </f7-list>
        </div>
        <div class="qm-entry-box">
            <h4>常用应用</h4>
            <div class="qm-entry">
                <div
                    v-for="(item, index) in menu"
                    :key="index"
                    v-if="item.show"
                    class="qm-entry-list"
                >
                    <qm-entry
                        :data="item"
                        iconWidth="88"
                        fontSize="24"
                        v-if="item.show"
                    >
                    </qm-entry>
                </div>
            </div>
        </div>
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
import formatter from '../../../libs/framework/formatter'
export default class instance extends controller {
    mixin() {
        return {
            data() {
                return {
                    menu: [
                        {
                            href: '/business/qzjx/installManagement/index',
                            image: require('@/assets/img/qzjx/azgl.svg'),
                            title: '安装管理',
                            show: true,
                        },
                        {
                            href: '/business/qzjx/disassembly/index',
                            image: require('@/assets/img/qzjx/cxgl.svg'),
                            title: '拆卸管理',
                            show: true,
                        },
                        {
                            href: '/business/qzjx/roofUp/index',
                            image: require('@/assets/img/qzjx/dsjj.svg'),
                            title: '顶升加节',
                            show: true,
                        },
                        {
                            href: '/business/qzjx/deviceMonitor/list',
                            image: require('@/assets/img/qzjx/sbjc.svg'),
                            title: '设备检测',
                            show: true,
                        },
                        {
                            href: '/business/qzjx/maintenance/list',
                            image: require('@/assets/img/qzjx/whby.svg'),
                            title: '维护保养',
                            show: true,
                        },
                        {
                            href: '',
                            image: require('@/assets/img/qzjx/wdqy.svg'),
                            title: '我的企业',
                            show: true,
                        },
                        {
                            href: '/business/qzjx/face/list',
                            image: require('@/assets/img/qzjx/face.svg'),
                            title: '人脸采集',
                            show: true,
                        },
                        // {
                        //     href: '/business/qzjx/mobileEquipment/index',
                        //     image: require('@/assets/img/qzjx/face.svg'),
                        //     title: '移动机械',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/mobileEquipment/statistic/index',
                        //     image: require('@/assets/img/qzjx/face.svg'),
                        //     title: '移动机械统计',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/aWarehouse/index',
                        //     image: require('@/assets/img/qzjx/zdjr.svg'),
                        //     title: '终端接入',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/inquiry/list',
                        //     image: require('@/assets/img/qzjx/sydj.svg'),
                        //     title: '使用登记',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/inquiry/list',
                        //     image: require('@/assets/img/qzjx/cqba.svg'),
                        //     title: '产权备案',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/aWarehouse/index',
                        //     image: require('@/assets/img/qzjx/cqzx.svg'),
                        //     title: '产权注销',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/inquiry/list',
                        //     image: require('@/assets/img/qzjx/bzjdj.svg'),
                        //     title: '标准节登记',
                        //     show: true,
                        // },
                        // {
                        //     href: '/business/qzjx/manage/list',
                        //     image: require('@/assets/img/qzjx/menu-more.svg'),
                        //     title: '更多',
                        //     show: true,
                        // },
                    ],
                    isUmSdk: false,
                    query: {
                        data: [],
                    },
                }
            },
            methods: {
                /**
                 * 人性化时间
                 * @param {String} createTime
                    */
                getCommentTime(createTime) {
                    let serverTime=new Date().getTime()
                    createTime=new Date(createTime).getTime()
                    const interval = (serverTime - createTime) / 1000
                    if (interval < 60) {
                    return '刚刚'
                    } else if (interval < 60 * 60) {
                    let tempTime = Math.floor(interval / 60)
                    return `${tempTime}分钟前`
                    } else if (interval < 60 * 60 * 24) {
                    let tempTime = Math.floor(interval / (60 * 60))
                    return `${tempTime}小时前`
                    } 
                    // else if (interval < 60 * 60 * 24 * 7) {
                    // let tempTime = Math.floor(interval / (60 * 60 * 24))
                    // return `${tempTime}天前`
                    // } 
                    else if (interval < 60 * 60 * 24 * 365) {
                    return formatter.formatDate(new Date(createTime),'MM-dd')
                    } else {
                    return formatter.formatDate(new Date(createTime),'yyyy-MM-dd')
                    }
                },
                tags(val) {
                    let v = []
                    if (val == '拆卸') {
                        v.push('tag-yellow')
                    } else if (val == '检测') {
                        v.push('tag-green')
                    }
                    return v
                },
                openSidebar() {
                    if (window.qmsdk) {
                        window.qmsdk.openSidebar();
                    } else if (this.isUmSdk) {
                        umSdk.preRefresh({
                            type: 1, // 0刷新 1不刷新
                            step: 0, // 返回上第几页，默认0
                            success: function () {},
                            fail: function (err) {},
                        })
                    } else {
                        this.$f7router.navigate(`/ui/set/index`)
                    }
                },
                showTime1(date) {
                    return formatter.formatDate(date, 'yyyy-MM-dd hh:mm')
                },
                goTodo(item) {
                    if (item.aspType == 'WORKFLOW') {
                        this.getWorkflowArgs({
                            formId: item.formId,
                        }).then((rlt) => {
                            let url = ''
                            if (rlt.taskId) {
                                url = `${
                                    rlt.mobileFormUrl
                                }?action=processEdit&taskId=${
                                    rlt.taskId
                                }&assigneeId=${rlt.assigneeId}&appCode=${
                                    rlt.appCode
                                }&version=${rlt.version}&formId=${
                                    item.formId
                                }&_r=${new Date().getTime()}`
                            } else if (rlt.historyTaskId) {
                                url = `${
                                    rlt.mobileFormUrl
                                }?action=processView&historyTaskId=${
                                    rlt.historyTaskId
                                }&appCode=${rlt.appCode}&version=${
                                    rlt.version
                                }&formId=${
                                    item.formId
                                }&_r=${new Date().getTime()}&assigneeId=${
                                    rlt.assigneeId
                                }`
                            } else {
                                this.$toast('无法获取应用的处理地址')
                            }
                            if (url) {
                                this.$f7router.navigate(url)
                            }
                        })
                    } else {
                        let url=item.appEditUrl
                        // if(item.thirdParams){
                        //     let params=JSON.parse(item.thirdParams)
                        //     // 如果地址上有pageAction，thirdParams也有pageAction，则忽略thirdParams里面的pageAction
                        //     if(url.indexOf('pageAction')!=-1&&params.pageAction){
                        //         delete params.pageAction
                        //     }
                        //     let paramStr = [];
                        //     for (let key in params) {
                        //         paramStr.push(`${key}=${params[key]}`);
                        //     }
                        //     paramStr = paramStr.join("&");
                        //     url=url+`?${paramStr}`
                        // }
                        this.$f7router.navigate(url)
                    }
                },
                goToHomePage() {
                    let self = this;
                    self.$util
                        .request(
                            '/app/ent/entPersonBase/getPersonBaseByCurrentUser',
                            {},
                            'post'
                        )
                        .then((res) => {
                            let caseId = null;
                            if (res.data.parameters && res.data.parameters.entPerson && res.data.parameters.entPerson.caseId) {
                                caseId = res.data.parameters.entPerson.caseId;
                            }
                            if (res.data.parameters && res.data.parameters.entPersonCase && res.data.parameters.entPersonCase.caseId) {
                                caseId =res.data.parameters.entPersonCase.caseId;
                            }
                            if (res.data.parameters && res.data.parameters.isPerson != 1) {
                                self.menu[5].show = false
                            } else {
                                self.menu[5].show = true
                            }
                            if (caseId) {
                                self.getWorkflowArgs({
                                    formId: caseId,
                                }).then((rlt) => {
                                    let url = ''
                                    rlt.appUrl =
                                        '/business/qzjx/bindUnit/create'
                                    if (rlt.taskId) {
                                        url = `${
                                            rlt.appUrl
                                        }?action=processEdit&taskId=${
                                            rlt.taskId
                                        }&assigneeId=${
                                            rlt.assigneeId
                                        }&appCode=${rlt.appCode}&version=${
                                            rlt.version
                                        }&_r=${new Date().getTime()}`
                                    } else if (rlt.historyTaskId) {
                                        url = `${
                                            rlt.appUrl
                                        }?action=processView&historyTaskId=${
                                            rlt.historyTaskId
                                        }&appCode=${rlt.appCode}&version=${
                                            rlt.version
                                        }&_r=${new Date().getTime()}&assigneeId=${
                                            rlt.assigneeId
                                        }`
                                    } else {
                                        self.$toast('无法获取应用的处理地址')
                                    }
                                    if (url) {
                                        self.menu[5].href = url
                                    }
                                })
                            }
                        })
                },
                getList() {
                    this.$f7.request.post(
                        `/workflow/toDoListExt/query`,
                        {
                            start: 0,
                            length: 3,
                            draw: 1,
                            query: {
                                client: 'app',
                            },
                        },
                        (r) => {
                            r = JSON.parse(r)
                            if (r && r.success) {
                                this.query = r
                            } else {
                                this.$toast(r.message || '网络错误，请稍后重试')
                            }
                        }
                    )
                },
            },
            mounted() {
                window.localStorage.removeItem('handleType')
                this.getList()
                this.goToHomePage()
                window.localStorage.setItem('maintenanceIndex', 1)
                this.isUmSdk = this.$util.isUmSdk()
            },
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

@{deep}.page-content {
    padding-top: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f7 100%);
}

.hntList {
    .header {
        height: 194px;
        padding: 11px 16px;
        background: url('../../../assets/img/qzjx/header-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .links {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .home-title {
            position: absolute;
            top: 66px;
            left: 30px;
        }
    }
}

.info-box {
    margin: -55px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 12px;
    background: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(136, 136, 136, 0.06);
    border-radius: 8px;

    .info-box-left {
        font-size: 18px;
        color: #333333;
        width: 18%;
        font-style: italic;
        font-weight: bold;
        line-height: 22px;

        .message-title {
            color: #1990ff;
        }
    }

    .info-box-right {
        width: 82%;
        font-size: 12px;
        color: #5a6683;

        .messages-content {
            margin-bottom: 7px;

            span:first-child {
                color: #1990ff;
            }
        }

        .info-content {
            span:first-child {
                color: #0fc8bc;
            }
        }

        div {
            display: flex;
            align-items: center;
            width: 100%;

            span:first-child {
                width: 28px;
                display: inline-block;
            }

            span:nth-child(2) {
                width: 60%;
                display: inline-block;
            }

            span:nth-child(3) {
                width: 28%;
                display: inline-block;
                text-align: right;
                color: #909db6;
            }
        }
    }
}

.list-box {
    margin: 20px 12px 14px;

    .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 4px;

        @{deep}.van-badge--fixed {
            right: -4px;
        }

        .more,
        @{deep}.icon {
            color: #8995ac;
        }
    }
}

h4 {
    margin: 0;
}

.search-list {
    margin: 9px 0 0;
    background: url('../../../assets/img/qzjx/home-list-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    @{deep}ul {
        background: none;
        margin: 0;
        padding: 12px 18px;
    }

    li {
        border-bottom: 1px solid #e9edf7;
        padding: 15px 0;
        font-size: 13px;
        color: #8995ac;
        font-weight: 400;

        &:last-child {
            border-bottom: none;
        }

        .content {
            .content-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 6px;

                .tag {
                    border-color: #1990ff;
                    color: #1990ff;
                }

                .tag-yellow {
                    border-color: #ff9534;
                    color: #ff9534;
                }

                .tag-green {
                    border-color: #25c670;
                    color: #25c670;
                }

                .code {
                    font-size: 16px;
                    font-weight: 500;
                    color: #242424;
                    margin-left: 5px;
                }

                .time {
                    font-size: 12px;
                    color: #909db6;
                }
            }
        }
    }
}

.qm-entry-box {
    margin: 0 16px 12px;

    h4 {
        margin-bottom: 12px;
    }

    @{deep}.qm-entry {
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-row-gap: calc(32px * var(--ratio));
        background: #fff;
        padding: 15px 0;
        box-shadow: 0px 5px 10px 0px rgba(64, 121, 184, 0.08);
        border-radius: 8px;

        .entry .entry-title {
            margin-top: calc(8px * var(--ratio));
        }
        .entry .link .entry-img {
            width: 32px;
            height: 32px;
        }
    }
}
/deep/.van-empty__image {
    width: 80px;
    height: 80px;
}
</style>
